<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script type="text/javascript" src="static/admin/js/js.js"></script>
    <title>门锁列表</title>
    <style>
        body{
            margin: 0;
            /* background-color: rgb(29, 80, 163); */
            
            background-size: 100% 100%;
            box-sizing: border-box;
            width: 100%;
            height: 98vh;
        }
        .header{
            
            justify-content: space-between;
            align-items: center;
            padding:0 30px;
            margin: 8px 0;
			color:#000;
			
            font-size: 4vw;
            margin: 8px 0;
			font-family:bold;
			
        }
        .img{
            /* position: absolute;
            left: 3vw;
            top: 1.5vw; */
        }
        .img img{
            width: 8vw;
            /* height: 100%; */
            margin-right: 2vw;
        }
        .header h1{
            color:#000;
            font-size: 4vw;
            margin: 8px 0;
        }
        .content{
            /* display: flex; */
            padding: 0 40px;
        }
        .left{
            /* width: 70vw; */
           display: flex;
           flex-wrap: wrap; 
           justify-content: space-around;
           align-items: center;
        }
        .chunk{
            width: 24%;
           
            height: 80px;
            padding-top: 20px;
            margin: 8px;
            text-align: center;
			line-height:40px;
			font-size:30px;
			background-color:rgb(29, 80, 163);
			 color: white;
			 border-radius:20px;
        }
        .chunk img{
            width: 90%;
            height: 200px;
            margin-bottom: 20px;
        }
        .chunk-chunk{
            display: inline-block;
            padding: 3px 60px;
            background-color:rgb(29, 80, 163);
            border-radius: 5px;
            color: white;
			font-size:30px;
			line-height:30px
        }
       
        .bottom{
            width: 80vw;
            display: flex;
            color: white;
            justify-content: space-between;
            position: fixed;
            right:  20px;
            bottom: 10px;
        }
        .time{
            color: white;
            font-size: 20px;
        }
        .btn{
            width: 50px;
            height: 30px;
            background-color: white;
            font-size: 12px;
            text-align: center;
            line-height: 30px;
            border-radius: 3px;
            margin-left: 10px;
        }
    </style>
    
</head>
<body> 
    <div class="header" style="text-align:center;margin:0 auto">
       
        智慧社区远程开门列表
        
        
    </div>

    <div class="content">
        <div class="left">
            {foreach $list as $lis}
            <div class="chunk" >
                <!--<div class="chunk-chunk" id="title2"></div>-->
				<span onclick="lockOpen('{$lis.serial}')" style="cursor:pointer">{$lis.lockname}</span>
            </div>
            {/foreach}
        </div>
        
    </div>
    
    <div class="bottom">
        <div></div>
        <div>杭州早早科技有限公司</div>
        <div>联系电话:0571-88686117</div>
    </div>




</body>
</html>
<script type="text/javascript">
	function lockOpen(serial){
		if(confirm('确定要开门吗?')) 
		{ 
			//console.log(serial);
			$.post("{:url('lockOpen2')}",{serial:serial},function(r){
				console.log(r);
				if(r=="1"){
					alert('开门成功');
					return false; 
				}else{
					alert('开门失败');
					location.reload();
				}
            
			},'html')
		} 
		
	} 

</script>